<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>智能助手</title>
   <script src="{% static 'jquery/jquery-3.7.1.min.js' %}"></script>    
  <link rel="stylesheet" href="{% static 'bootstrap5/bootstrap.min.css' %}">
  <script src="{% static 'bootstrap5/popper.min.js' %}"></script>
  <script src="{% static 'bootstrap5/bootstrap.min.js' %}"></script>
  <style>
    /* body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
    } */

    .card-body {
      width: 100%;
      max-width: 800px;
      margin: 20px auto;
      /* background-color: #fff; */
      border-radius: 8px;
      /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
      padding: 20px;
    }

    .chat-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      /* max-height: 500px; */
      overflow-y: auto;
      margin-bottom: 20px;
      padding: 10px;
      /* border: 1px solid #ccc; */
      border-radius: 8px;
      background-color: #fafafa;
      margin: 0 auto;
    }

    .message {
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 8px;
      display: inline-block;
      max-width: 75%;
      word-wrap: break-word;
    }

    .user-message {
      background-color: #e0f7fa;
      align-self: flex-end;
      text-align: right;
    }

    .ai-message {
      background-color: #f1f8e9;
      align-self: flex-start;
      text-align: left;
    }

    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      background-color: #fff;
      padding: 10px 0;
      /* box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
      border-top: 1px solid #ccc; */
    }

    .footer-inner {
      width: 80%;
      max-width: 800px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer input {
      width: 80%;
      padding: 10px;
      border-radius: 20px;
      border: 1px solid #ccc;
    }

    .footer input:focus {
      outline: none;
      border-color: #1E88E5;
      /* 这是一个蓝色的十六进制颜色值 */
    }

    .footer button {
      padding: 10px 20px;
      border-radius: 20px;
      border: none;
      background-color: #007bff;
      color: #fff;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <header>
    <div class="px-3 py-2 text-bg-dark">
      <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
          <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
            <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
              <use href="#bootstrap"></use>
            </svg>
          </a>

          <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
            <li>
              <a href="/index" class="nav-link text-white">
                <svg class="bi d-block mx-auto mb-1" width="24" height="24">
                  <use href="#speedometer2"></use>
                </svg>
                主页
              </a>
            </li>
            <li>
              <a href="#" class="nav-link text-white">
                <svg class="bi d-block mx-auto mb-1" width="24" height="24">
                  <use href="#home"></use>
                </svg>
                检测记录
              </a>
            </li>
            <li>
              <a href="#" class="nav-link text-secondary">
                <svg class="bi d-block mx-auto mb-1" width="24" height="24">
                  <use href="#table"></use>
                </svg>
                智能助手
              </a>
            </li>
            <li>
              <a href="#" class="nav-link text-white">
                <svg class="bi d-block mx-auto mb-1" width="24" height="24">
                  <use href="black"></use>
                </svg>
                黑白名单
              </a>
            </li>
            <li>
              <a href="#" class="nav-link text-white">
                <svg class="bi d-block mx-auto mb-1" width="24" height="24">
                  <use href="#people-circle"></use>
                </svg>
                模型信息
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    {# <div class="px-3 py-2 border-bottom mb-3">#}
      {# <div class="container d-flex flex-wrap justify-content-center">#}
        {# <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto" role="search">#}
          {# <input type="search" class="form-control" placeholder="Search..." aria-label="Search">#}
          {# </form>#}
        {##}
        {# <div class="text-end">#}
          {# <button type="button" class="btn btn-light text-dark me-2">Login</button>#}
          {# <button type="button" class="btn btn-primary">Sign-up</button>#}
          {# </div>#}
        {# </div>#}
      {# </div>#}
  </header>
  <hr>
  <div class="container">
    <div class="card shadow-sm">
      <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
        role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
        <title>Placeholder</title>
        <rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">
          你好，我是你的智能助手,欢迎对我提问</text>
      </svg>
    </div>
    <div class="card-body">
      <div class="chat-box" id="chat-box">
        <!-- Messages will appear here -->
      </div>
      <div class="footer">
        <input type="text" id="user-input" placeholder="输入你的问题..." />
        <button onclick="sendMessage()">发送</button>
      </div>
    </div>
  </div>
  </div>

  <script>
    function sendMessage() {
      var userInput = document.getElementById('user-input').value;
      if (userInput.trim() === '') return;

      //请求体
      var requestData = {
        msg1: userInput
      };

      displayMessage('user', userInput);
      document.getElementById('user-input').value = '';
      $.ajax({
        url: `ai_help`,
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify(requestData),
        success: function (response) {
            displayMessage("ai",response.msg2)
        },
        error: function () {
            console.error('Error occurred:', status, error);
            console.error('Response from server:', xhr.responseText);
        }
      });



      // Simulate AI response (replace with actual AI response logic)
      // setTimeout(() => {
      //   displayMessage('ai', '这是AI的回答：' + userInput);
      // }, 1000);


    }

    function displayMessage(sender, message) {
      var chatBox = document.getElementById('chat-box');
      var messageDiv = document.createElement('div');
      messageDiv.className = 'message ' + (sender === 'user' ? 'user-message' : 'ai-message');
      messageDiv.textContent = message;
      chatBox.appendChild(messageDiv);
      chatBox.scrollTop = chatBox.scrollHeight;
    }
    
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                // Only send the token to relative URLs i.e. locally.
                xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
            }
        }
    });

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
  </script>
</body>

</html>